<!--
 * @Description: sql编译
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2022-01-05 14:35:31
 * @LastEditTime: 2022-01-06 15:02:08
-->
<template>
  <div class="container">
    <!-- 左侧 -->
    <sqlLeft
      ref="createLeft"
      :files-list="filesList"
      :base-dw-list="baseDwList"
      :current-sheets-list="currentSheetsList"
      @getSheets="getSheets"
      @delFiles="delFiles"
      @toCreate="toCreate"
      @getDwList="getDwList"
    />
    <!-- 右侧 -->
    <div class="right-box">
      <div class="right-top">
        <div class="tab-bg" />
        <sqlEdit ref="sqlEdit" />
      </div>
      <div class="btns">
        <el-button
          type="primary"
          icon="el-icon-caret-right"
          @click="todo"
        >执行</el-button>
        <el-button
          type="success"
          icon="el-icon-brush"
          @click="fmt"
        >格式化</el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh"
          @click="empty"
        >清空</el-button>
        <div style="float: right">
          <span class="mum-label">数据条数</span>
          <el-input-number
            v-model="queryLen"
            controls-position="right"
            step-strictly
            :min="1"
            style="width: 150px"
          />
        </div>
      </div>
      <div class="right-bot">
        <div class="tab-bg" />
        <sqlResult />
      </div>
    </div>
  </div>
</template>
<script>
import sqlLeft from './components/sqlLeft.vue'
import sqlEdit from './components/sqlEdit.vue'
import sqlResult from './components/sqlResult.vue'
import mixin from '../mixin/create'
import * as api from '@/api/bi/dw3'
export default {
  components: {
    sqlLeft,
    sqlEdit,
    sqlResult
  },
  mixins: [mixin],
  data() {
    return {
      queryLen: 50
    }
  },
  methods: {
    getSheets(item) {
      // 设置选中状态
      this.filesList.forEach((file) => {
        file.isSelect = item.id === file.id
      })
      const query = {
        recordId: item.id,
        type: item.type,
        dataSourceType: item.dataSourceType
      }
      api.getSheets(query).then((res) => {
        if (res.code === 200) {
          this.currentSheetsList = res.data.recordVos
          this.currentFile = item
        }
      })
    },
    getDwList(val) {
      this.getDwListFun(val, 3)
    },
    fmt() {
      this.$refs.sqlEdit.fmt()
    },
    empty() {
      this.$refs.sqlEdit.empty()
    },
    todo() {
      console.log(this.$refs.sqlEdit.getValue())
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: calc(100vh - 86px);
  .tab-bg {
    width: 100%;
    height: 46px;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    background: #f5f7fa;
    border-bottom: 1px solid #dfe4ed;
  }
  .right-box {
    width: calc(100vw - 300px);
    .right-top {
      position: relative;
      width: 100%;
      height: 370px;
      padding-left: 5px;
      padding-top: 5px;
    }
    .right-bot {
      position: relative;
      width: 100%;
      height: calc(100% - 425px);
      margin-top: 10px;
      padding-left: 5px;
      padding-top: 5px;
      border-top: 1px solid #dfe4ed;
    }
    .btns {
      margin: 0 10px;
      .mum-label {
        font-size: 14px;
        color: #007580;
        margin-right: 10px;
      }
    }
  }
}
</style>
